<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue实例的属性和方法</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		{{msg}}

		<h2 ref="hello">你好</h2>
		<p ref="world">世界</p>
		<hr>
		<h1 ref="title">标题：{{name}}</h1>
	</div>

	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				msg:'welcome to beijing',
				name:'tom'
			}
		});

		// /**
		//  * 属性
		//  */
		// // vm.属性名 获取data中的属性
		// console.log('vm.msg:',vm.msg);

		// // vm.$el 获取vue实例关联的元素
		// console.log("vm.$el:",vm.$el); //DOM对象
		// vm.$el.style.color='red';

		// // vm.$data //获取数据对象data
		// console.log("vm.$data:",vm.$data);
		// console.log("vm.$data.msg:",vm.$data.msg);

		// // vm.$options //获取自定义属性
		// console.log("vm.$options.name:",vm.$options.name);
		// vm.$options.show();

		// // vm.$refs 获取所有添加ref属性的元素
		// console.log("vm.$refs:",vm.$refs);
		// console.log("vm.$refs.hello:",vm.$refs.hello); //DOM对象
		// vm.$refs.hello.style.color='blue';

		/**
		 * 方法
		 */
		//vm.$mount()  手动挂载vue实例
		// vm.$mount('#itany');
		// var vm=new Vue({
		// 	data:{
		// 		msg:'欢迎来到南京网博',
		//
		// 	}
		// }).$mount('#itany');

		// //vm.$destroy() 销毁实例
		// // vm.$destroy();

		// vm.$nextTick(callback) 在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM
		// 修改数据
		vm.name='汤姆';
		//DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
		console.log(vm.$refs.title.textContent);
		vm.$nextTick(function(){
			//DOM更新完成，更新完成后再执行此代码
			console.log(vm.$refs.title.textContent);
		});
	</script>

</body>
</html>
